<script lang="ts" setup>
  import { watchDebounced } from '@vueuse/core';
  import { watchEffect, onMounted } from 'vue';
  import { i18nTranslate } from '/@/i18n';
  import { ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  const pathRecord: Array<string> = ['/home', '/makets', '/trade', '/fund', '/me'];

  const route = useRoute();
  const router = useRouter();
  const tabbarList = ref([
    { name: 'Home', link: '/home', icon: 'home.png', activeIcon: 'home-active.png' },
    {
      name: 'Makets',
      link: '/makets',
      icon: 'makets.png',
      activeIcon: 'makets-active.png',
    },
    {
      name: 'Trade',
      link: '/trade',
      icon: 'trade.png',
      activeIcon: 'trade-active.png',
    },
    {
      name: 'Fund',
      link: '/fund',
      icon: 'assets.png',
      activeIcon: 'assets-active.png',
    },
    { name: 'Me', link: '/me', icon: 'me.png', activeIcon: 'me-active.png' },
  ]);
  const active = ref(pathRecord.indexOf(route.path));

  watchEffect(() => (active.value = pathRecord.indexOf(route.path)));

  onMounted(() => {
    active.value = pathRecord.indexOf(route.path);
  });

  watchDebounced(
    active,
    () => {
      if (active.value >= 0) {
        router.push(pathRecord[active.value]);
      }
    },
    {
      debounce: 200,
    },
  );
  defineProps<{ visible: boolean }>();
</script>
<template>
  <footer class="bottom-bar">
    <!-- 占位，避免最底下的内容不出现 -->
    <div v-if="visible" class="bottom-bar-height"></div>
    <!-- 底部导航栏 -->
    <var-bottom-navigation v-if="visible" v-model:active="active" fixed>
      <var-bottom-navigation-item :label="$t('Home')" icon="Vector-3" namespace="icon" />
      <var-bottom-navigation-item :label="$t('Makets')" icon="Vector" namespace="icon" />
      <var-bottom-navigation-item>
        <div class="center_box"></div>
        <p class="trade_font">{{$t('Trade')}}</p>
      </var-bottom-navigation-item>
      <var-bottom-navigation-item :label="$t('Fund')" icon="Vector-1" namespace="icon" />
      <var-bottom-navigation-item :label="$t('Me')" icon="Vector-2" namespace="icon" />
    </var-bottom-navigation>
  </footer>
</template>
<style lang="scss" scoped>
  .bottom-bar {
    .bottom-bar-height {
      height: var(--bottom-navigation-height);
    }
  }
</style>
<style lang="scss">
  .bottom-bar {
    color: rgb(108, 117, 125);
    // 对底部导航栏做定制化
    .var-bottom-navigation {
      // box-shadow: 0px -4px 12px 0px var(--bottom-navigation-shadow-color);
      background-color: transparent;
      background-image: url('/@images/bar_bg.png');
      background-size: 100% 100%;
      &.var-bottom-navigation--fixed {
        // 调整盒模型，兼容低版本ios
        box-sizing: border-box;
        /* 兼容 iOS < 11.2 */
        // padding-bottom: constant(safe-area-inset-bottom);
        /* 兼容 iOS >= 11.2 */
        // padding-bottom: env(safe-area-inset-bottom);
        // padding-bottom: 26px;
      }
    }
    .var-bottom-navigation-item {
      background-color: transparent;
      color: #6c757d;
      padding: 28px 0 0 0;
      .var-bottom-navigation-item__label {
        color: #6c757d;
        font-size: 20px;
      }
    }
    .var-bottom-navigation-item__label {
      margin-top: 8px;
    }
    .var-ripple {
      display: none;
    }
    .center_box {
      width: 64px;
      height: 64px;
      background-image: url('/@images/trade.png');
      background-size: 100% 100%;
      position: absolute;
      top: 13px;
      left: 0;
      right: 0;
      margin: auto;
    }
    .trade_font {    
      margin-top: 40px;
    }
    .var-bottom-navigation-item--active {
      color: #0063f5;
      .var-bottom-navigation-item__label {
        color: #0063f5;
      }
    }
  }
</style>
